import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Styled from 'styled-components';
import { Menu, Icon, Layout, Popover, Dropdown, Avatar } from 'antd';
import SiderCustom from './SiderCustom';

const Logo = Styled.div`
  margin-right: 16px;
  width: ${props => props.collapsed ? 48 : 168}px;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.25, 0, 0.15, 1) 0s;
  cursor: pointer;
  > .expanded {
    display: ${props => props.collapsed ? 'none' : 'inline'};
    max-height: 32px;
  }
  > .collapsed {
    display: ${props => props.collapsed ? 'inline' : 'none'};
    max-height: 28px;
  }
`;

const Content = Styled.div`
  display: flex;
  flex: 1;
  justify-content: space-between;
  > ul {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    > li {
      display: inline-block;
      vertical-align: middle;
      &.breadcrumb {
        padding-left: 20px;
        .ant-breadcrumb a:hover {
          color: #FFFFFF;
        }
      }
      > .item {
        line-height: 100%;
        text-align: center;
        color: #FFFFFF;
        cursor: pointer;
        > i {
          font-size: 20px;
        }
      }
    }
  }
`;

class HeaderCustom extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  handlClickMenu({key}) {
    switch(key) {
      case 'setting':
        break;
      case 'logout':
        localStorage.removeItem('__rs');
        localStorage.removeItem('__rstk');
        this.props.history.push('/login');
        break;
      default:
        break;
    }
  };
  
  render() {
    const { user, screen, collapsed, toggle } = this.props;
    const { visible } = this.state;
    return (
      <Layout.Header className="rs-header">
        {!screen.isMobile && (
          <Logo collapsed={collapsed}>
            <img src="/res/logo.png" className="expanded" alt="" />
            <img src="/res/icon.png" className="collapsed" alt="" />
          </Logo>
        )}
        <Content>
          <ul>
            <li>
              <div className="item">
                {screen.isMobile ? (
                  <Popover content={<SiderCustom fnPopoverHide={() => this.setState({visible: false})} />} trigger="click" placement="bottomLeft" visible={visible} onVisibleChange={(visible) => this.setState({visible})}>
                    <Icon type="bars" />
                  </Popover>
                ) : (
                  <Icon type={`menu-${collapsed ? 'un' : ''}fold`} onClick={toggle} />
                )}
              </div>
            </li>
          </ul>
          <ul>
            <li>
              <Dropdown overlay={(
                <Menu className="rs-menu-pop" onClick={this.handlClickMenu.bind(this)}>
                  <Menu.ItemGroup title={<span>您好：{user.name}</span>}>
                    <Menu.Item key="setting"><Icon type="setting" />个人设置</Menu.Item>
                    <Menu.Divider />
                    <Menu.Item key="logout"><Icon type="logout" />退出登录</Menu.Item>
                  </Menu.ItemGroup>
              </Menu>
              )}
              >
                <Avatar src={user.avatar || '/res/avatar.png'} size="large" style={{cursor: 'pointer'}} />
              </Dropdown>
            </li>
          </ul>
        </Content>
      </Layout.Header>
    )
  }
}

export default withRouter(connect(state => ({ 
  user: state.user,
  screen: state.screen
}))(HeaderCustom));
